/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import {createSwitchNavigator, createAppContainer} from 'react-navigation';
import React,{Component} from 'react';
import { BottomTabBar,createBottomTabNavigator} from 'react-navigation-tabs';
import {connect} from 'react-redux';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import FavoritePage from '../page/FavoritePage';
import TrendingPage from '../page/TrendingPage';
import PopularPage from '../page/PopularPage';
import MyPage from '../page/MyPage';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Entypo from 'react-native-vector-icons/Entypo';
import NavigationUtil from '../navigator/NavigationUtil';
type Props = {};
const  TABS = {
    PopularPage:{
        screen:PopularPage,
        navigationOptions: {
            tabBarLabel: '流行',
            tabBarIcon: ({tintColor,focused}) => (
                <MaterialIcons
                    name={'whatshot'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    FavoritePage:{
        screen:FavoritePage,
        navigationOptions: {
            tabBarLabel: '收藏',
            tabBarIcon: ({tintColor,focused}) => (
                <MaterialIcons
                    name={'favorite'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    TrendingPage:{
        screen:TrendingPage,
        navigationOptions: {
            tabBarLabel: '趋势',
            tabBarIcon: ({tintColor,focused}) => (
                <Ionicons
                    name={'md-trending-up'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    MyPage:{
        screen:MyPage,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor,focused}) => (
                <Entypo
                    name={'user'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    }
};
class DynamicTabNavigator extends Component<Props>{
    constructor(props) {
        super(props);
        console.disableYellowBox = true;
    }
    _tabNavigator(){
        if(this.Tabs){
            return this.Tabs ;
        }
       const {PopularPage,TrendingPage,FavoritePage,MyPage} = TABS;
       const tabs = {PopularPage,TrendingPage,FavoritePage,MyPage};
        PopularPage.navigationOptions.tabBarLabel = '最新';
       return this.Tabs = createAppContainer(createBottomTabNavigator(tabs,{
           tabBarComponent: props => {
               return <TabBarComponent theme={this.props.theme} {...props}/>
           }
       }))
    }
  render(){
      // NavigationUtil.navigation = this.props.navigation;
        const Tab = this._tabNavigator();
    return <Tab/>;
  }
}

class TabBarComponent extends React.Component{
    constructor(props) {
        super(props);
        this.theme={
            tintColor: props.activeTintColor,
            updateTime: new Date().getTime(),
        }
    }
    render(){
        // const {routes, index} = this.props.navigation.state;
        // if(routes[index].params){
        //     const {theme} = routes[index].params;
        //     if(theme && theme.updateTime > this.theme.updateTime){
        //         this.theme = theme;
        //     }
        // }
        return <BottomTabBar
            {...this.props}
            activeTintColor={this.props.theme}
            // activeTintColor={this.theme.tintColor || this.props.activeTintColor}
        />
    }

}
const mapStateToProps = state => ({
    theme: state.theme.theme,
});
export default connect(mapStateToProps)(DynamicTabNavigator);

// export default App;
